@using BootBlazor.Layout.Components.Culture
@using BootBlazor.Layout.Components.Themes

@rendermode InteractiveServer
@attribute [AllowAnonymous]
@inject AuthenticationStateProvider _stateProvider;
@inject NavigationManager _navManager;
@inject IDbContextFactory<BootBlazorDbContext> _dbFactory;
@inject ISnackbar _snackbarService;
@inject IJSRuntime _jsRuntime;
@inject JwtHelper _jwtHelper;
@inject NotificationHelper _notificationHelper;
@inject ExternalAuthService _authService;
@inject IHttpContextAccessor _httpAccessor;
@inject IStringLocalizer<CusCulture> Loc;

@page "/login"

<div class="full-screen d-flex justify-center align-center">
    <div class="inner"></div>
    @if (ShowContent)
    {
        <MudPaper Class="pa-8 d-flex justify-center align-center flex-column py-8 rounded-lg" Style="z-index:10;">
            <MudText Typo="Typo.h4" Class="py-4">
                <div class="d-flex align-center">
                    <MudIcon Icon="@IconsConstant.Blazor" Class="mr-1" Size="Size.Large"></MudIcon>
                    BootBlazor
                </div>
            </MudText>
            <div style="width:300px;">
                <EditForm Model="_loginModel" OnValidSubmit="LoginSubmit" style="width:100%;">
                    <DataAnnotationsValidator />
                    <MudTextField Class="mt-4" @bind-Value="_loginModel.UserName" Variant="Variant.Outlined" Margin="Margin.Dense"
                                  Placeholder="@Loc["Login_UserNameHelpText"]" For="@(() => _loginModel.UserName)"
                                  UserAttributes="InputAttributes" AdornmentIcon="@Icons.Material.Filled.AccountCircle"
                                  Adornment="Adornment.Start"></MudTextField>
                    <MudTextField Class="mt-4" @bind-Value="_loginModel.Password" Variant="Variant.Outlined" Margin="Margin.Dense"
                                  Placeholder="@Loc["Login_PasswordHelpText"]" For="@(() => _loginModel.Password)" InputType="InputType.Password"
                                  AdornmentIcon="@Icons.Material.Filled.Password" Adornment="Adornment.Start"
                                  UserAttributes="InputAttributes"></MudTextField>
                    <div class="mt-4">
                        <MudButton Variant="Variant.Filled" FullWidth="true" Color="Color.Primary"
                                   ButtonType="ButtonType.Submit" Disabled="IsLoading">
                            @if (IsLoading)
                            {
                                <MudProgressCircular Color="Color.Default" Indeterminate="true" Size="Size.Small" />
                            }
                            else
                            {
                                <MudIcon Icon="@Icons.Material.Filled.Login"></MudIcon>
                            }
                            <MudText Class="ml-2">@Loc["Login_LoginText"]</MudText>
                        </MudButton>
                    </div>
                </EditForm>
            </div>
            <div class="d-flex align-center mt-4" style="width:100%;">
                <MudSpacer />
                <CultureIcon IsText />
            </div>
        </MudPaper>
    }
    else
    {
        <svg class="pl" width="240" height="240" viewBox="0 0 240 240">
            <circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle>
            <circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle>
            <circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
            <circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
        </svg>
    }

    <div style="position: absolute; bottom: 20px; right: 20px;">
        <PrimaryChangeButton IsFab="true" />
    </div>
</div>
